<template>
  <div class="app-container">
    <el-button type="primary" @click="handleAddRole">定义快捷键</el-button>

    <el-table :data="shortcutKeyList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="Key" width="220">
        <template slot-scope="scope">
          {{ scope.row.key }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="描述">
        <template slot-scope="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)" disabled="true">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)" disabled="true">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shortcutKeyList: [
        {
          key: 'Alt+P',
          description: '跳转到收银界面'
        },
        {
          key: 'Alt+S',
          description: '跳转到订单页面'
        }
      ]
    }
  },
  methods: {
    handleEdit(scope) {
      console.log('=========================')
    },
    handleDelete({ $index, row }) {
      console.log('=========================')
    }
  }
}

</script>

<style lang="scss" scoped>
  .app-container {
    .roles-table {
      margin-top: 30px;
    }
    .permission-tree {
      margin-bottom: 30px;
    }
  }
</style>
